<template>
  <div>
    <van-nav-bar
      class="sfaaf"
      :title="txt2"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon name="cross" color="#000" size="20" />
      </template>
    </van-nav-bar>
    <div style="height: 40px">
      <van-notice-bar
        v-show="showcode"
        :scrollable="true"
        left-icon="more"
        color="#1989fa"
        background="#ecf9ff"
        >您得验证码为:{{ randomcode }}</van-notice-bar
      >
    </div>
    <div class="ipt">
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel" type="tel" placeholder="输入手机号" />

      <van-field v-model="password" type="password" placeholder="设置密码" />

      <van-field v-model="sms" clearable placeholder="输入验证码">
        <template #button>
          <van-button
            size="small"
            type="primary"
            round
            color="rgb(108,170,221)"
            @click="sendCode()"
            :disabled="disnow"
            ><div class="sendbtn">
              {{ verificationCode }}
            </div></van-button
          >
        </template>
      </van-field>
      
 
      <span class="fogpwd" @click="onClickLeft()">已有账号,去登录</span>
    </div>

    <div class="btn">
      <van-button
        color="rgb(30, 134, 219)"
        :disabled="!checked"
        round
        type="primary"
        size="large"
        @click="clickLogin"
        >{{ txt1 }}</van-button
      >
    </div>

    <div class="agree">
      <van-checkbox v-model="checked" icon-size="16px"
        >阅读并同意《隐私政策》并授权卡布达获取手机号</van-checkbox
      >
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  computed: {
    ...mapState(["txt1", "txt2",'idphone']),

    name() {
      return this.data;
    },
  },

  data() {
    return {
      tel: "",
      sms: null,
      password: "",
      checked: false,
      text: "密码登录",
      randomcode: "",
      verificationCode: "发送验证码",
      showcode: false,
      disnow: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    clickLogin() {
       let regPhone = /^1[3456789]\d{9}$/;

      if (
        regPhone.test(this.tel) &&
        this.password != "" &&
        this.sms == this.randomcode.toString()
        && this.sms !=''
      ) {
        const params = `phone=${this.tel}&userpwd=${this.password}&txt1=${this.txt1}`
        this.axios
          .post("v1/users/register",params)
          .then((res) => {
            console.log(res);
            this.$router.push('/login')
          });
      } else {
        console.log("登录失败");
      }
    },
    sendCode() {
      this.randomcode = Math.floor((Math.random()*(999999-100000)))+100000;
      this.countdown = 60;
      this.showcode = true;
      this.disnow = true;
      setInterval(() => {
        if (this.countdown == 0) {
          this.verificationCode = "发送验证码";
          this.disnow = false;
          clearInterval()
          return;
        } else {
          this.verificationCode = this.countdown;
        }
        this.countdown--;
      }, 300);
    },
  },
};
</script>


<style scoped>
.sfaaf >>> .van-nav-bar__text {
  color: #000;
}
.ipt {
  margin: 0 auto;
  margin-top: 70px;
  width: 300px;
}
.ipt >>> .van-cell {
  line-height: 30px;
}

.btn {
  width: 300px;
  margin: 0 auto;
  margin-top: 20px;
}
.pwdlog {
  /* width: 300px; */
  /* margin: 0 auto; */
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
}
.pwdlog span {
  color: rgb(30, 134, 219);
}
.agree {
  width: 300px;
  text-align: center;
  font-size: 12px;
  margin: 0 auto;
  margin-top: 20px;
}
.fogpwd {
  display: block;
  font-size: 12px;
  color: rgb(30, 134, 219);
  margin-top: 20px;
  margin-left: 15px;
}
.sendbtn {
  width: 60px;
}
</style>